<script lang="ts" setup>
import { ref,unref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter';
import { show, save, update } from '#/api/system/menu';

import { formSchamas } from './schemas';

const record = ref();
const isUpdate = ref(false);
const gridApi = ref();
const [MenuForm, formApi] = useVbenForm({
  showDefaultActions: false,
  ...formSchamas,
});

const [Modal, modalApi] = useVbenModal({
  draggable: true,
  onOpenChange(isOpen) {
    isUpdate.value = modalApi.getData()?.isUpdate ?? false;
    record.value = isOpen ? modalApi.getData()?.record || {} : {};
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    if (isOpen) {
      formApi.updateSchema([
        {
          fieldName: 'component',
          dependencies: {
            triggerFields: ['type'],
            disabled: async () => {
              const values = await formApi.getValues();
              // 组件地址只有目录、菜单才需配置
              return ![1, 2].includes(values.type);
            },
          },
        },
        {
          fieldName: 'open_type',
          dependencies: {
            triggerFields: ['type'],
            disabled: async () => {
              const values = await formApi.getValues();
              // 打开方式只有菜单==2才需配置
              return values.type !== 2;
            },
          },
        },
        {
          fieldName: 'path',
          dependencies: {
            triggerFields: ['type'],
            disabled: async () => {
              const values = await formApi.getValues();
              // 组件地址只有目录、菜单才需配置
              return ![1, 2,4].includes(values.type);
            },
          },
        },
        {
          fieldName: 'icon',
          dependencies: {
            triggerFields: ['type'],
            disabled: async () => {
              const values = await formApi.getValues();
              // 组件地址只有目录、菜单才需配置
              return ![1, 2].includes(values.type);
            },
          },
        },
        {
          fieldName: 'link_url',
          dependencies: {
            triggerFields: ['open_type'],
            disabled: async () => {
              const values = await formApi.getValues();
              // 组件地址只有目录、菜单才需配置
              return ![2, 3].includes(values.openType);
            },
          },
        },
        {
          fieldName: 'is_show',
          dependencies: {
            triggerFields: ['type'],
            disabled: async () => {
              const values = await formApi.getValues();
              // 组件地址只有目录、菜单才需配置
              return ![1, 2].includes(values.type);
            },
          },
        },
        {
          fieldName: 'is_cache',
          dependencies: {
            triggerFields: ['type'],
            disabled: async () => {
              const values = await formApi.getValues();
              // 组件地址只有目录、菜单才需配置
              return ![1, 2].includes(values.type);
            },
          },
        },
      ]);
    }
    if (isOpen && isUpdate.value) {
      show(record.value?.id).then((data) => {
        formApi.setValues(data);
      });
    } else {
      formApi.setValues(record.value);
    }
  },
  onConfirm() {
    formApi.validate().then(async (e: any) => {
      if (e.valid) {
        const values = await formApi.getValues();
        modalApi.setState({ loading: true, confirmLoading: true });
        const submitApi = unref(isUpdate)  ? update : save;
        const apiParams = unref(isUpdate) ? [record.value?.id, values] : [values];
        //@ts-ignore
        submitApi(...apiParams)
          .then(() => {
            message.success('保存成功');
            gridApi.value?.reload();
            modalApi.close();
          })
          .finally(() => {
            modalApi.setState({ loading: false, confirmLoading: false });
          });
      }
    });
  },
});
defineExpose(modalApi);
</script>
<template>
  <Modal :title="isUpdate ? '编辑菜单' : '新增菜单'" class="w-[60%]">
    <div class="common-form">
      <MenuForm />
    </div>
  </Modal>
</template>
<style scoped lang="less">
@import '#/assets/styles/common-form.less';
</style>
